<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="orderMain">
        <div class="orderItem" :key="index" v-for="(item, index) in orderArr">
          <div class="itemTime">{{ item.create_time }} 收藏了此需求</div>
          <div class="itemHead" @click="detaiFn(item)">
            <div class="headName">
              {{ item.project_demand_number }} · {{ item.project_name }}
            </div>
            <div class="headTime">{{ item.end_time }}</div>
          </div>
          <div class="orderForm" @click="detaiFn(item)">
            <div class="itemForm">
              <div class="formItem">
                <div class="itemName">经验要求</div>
                <div class="itemVal">{{ item.jdjy }}年以上</div>
              </div>
              <div class="formItem">
                <div class="itemName">周期要求</div>
                <div class="itemVal">{{ item.project_cycle }}个月</div>
              </div>
              <div class="formItem">
                <div class="itemName">办公要求</div>
                <div class="itemVal">{{ item.bgyq }}</div>
              </div>
              <div class="formItem">
                <div class="itemName">接单群体</div>
                <div class="itemVal">{{ item.jdqt }}</div>
              </div>
            </div>
            <div class="orderPricr">
              ¥{{ $converData.setMoney(item.project_budget) }}
            </div>
          </div>
          <div class="formItem" @click="detaiFn(item)">
            <div class="itemName">需求说明</div>
            <div class="itemVal">{{ item.project_describe }}</div>
          </div>
          <div class="saveCtrl">
            <div class="bindBtn" @click="toDetail(item)">查看详情</div>
            <div class="bindBtn lookBtn" @click="cancelSave(item, index)">
              取消收藏
            </div>
          </div>
        </div>
        <noData v-if="orderArr.length == 0"></noData>
      </div>
    </div>
    <div class="backBtn" @click="backFn">返回</div>

    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import { collectRecord, canceCollect } from "@/http/api";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import noData from "@/components/public/noData.vue";
import { showSuccessToast, showToast } from "vant";
export default {
  components: { load, getTimeOut, noData },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      orderArr: [],
      page: 1,
      per_page: 10,
      last_page: 0,
      getting: false,
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    detaiFn(item) {
      this.$router.push({
        path: "/detail",
        query: { id: item.project_demand_id },
      });
    },
    cancelSave(item, index) {
      let data = {
        project_demand_id: item.project_demand_id,
      };
      canceCollect(data)
        .then((res) => {
          if (res.data.code == 1) {
            showSuccessToast("取消收藏");
            this.orderArr.splice(index, 1);
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    getData() {
      let data = {
        page: this.page,
        per_page: this.per_page,
        status: this.stepId,
        project_name: this.serchKey,
      };
      collectRecord(data)
        .then((res) => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              this.orderArr.push(arr[i]);
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    nextfn() {
      if (this.$route.path == "/save") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  created() {
    this.getData();
  },
};
</script>
<style scoped lang="less">
.container {
  background-color: #e7eeff;
  min-height: 100vh;
  .showCont {
    padding-bottom: 0.75rem;
    box-sizing: border-box;
    padding-top: 1.25rem;
  }
  .orderMain {
    width: 100%;
    // margin-top: 0.75rem;
    padding: 0 4%;
    box-sizing: border-box;
    .orderItem {
      padding: 0.75rem 4%;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 0.75rem;
      border-radius: 0.25rem;
      .itemTime {
        font-size: 0.6rem;
        color: #86a9fb;
        margin-bottom: 0.5rem;
      }
      .itemHead {
        // padding: 0rem 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .headName {
          font-weight: bold;
          font-size: 0.8rem;
          flex: 1;
          width: 1rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-right: 0.75rem;
        }
        .headTime {
          font-size: 0.6rem;
          color: #999;
        }
      }
      .orderForm {
        margin-top: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .itemForm {
          flex: 1;
          width: 1rem;
          margin-right: 0.75rem;
        }
      }
      .orderPricr {
        font-size: 0.8rem;
        color: #86a9fb;
      }
      .formItem {
        display: flex;
        line-height: 1rem;
        margin-bottom: 0.25rem;
        .itemName {
          margin-right: 0.75rem;
          width: 3rem;
        }
        .itemVal {
          color: #666;
          flex: 1;
          width: 1rem;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 超出几行省略 */
        }
      }
      .saveCtrl {
        margin-top: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .bindBtn {
          text-align: center;
          width: 48%;
          line-height: 1.9rem;
          border-radius: 2rem;
          background-color: #e7eeff;
          color: #86a9fb;
          border: 1px solid #86a9fb;
          font-size: 0.65rem;
        }
        .lookBtn {
          background-color: #86a9fb;
          color: #fff;
        }
      }
    }
  }
  .backBtn {
    width: 92%;
    background-color: #86a9fb;
    color: #fff;
    text-align: center;
    position: fixed;
    bottom: 0.75rem;
    left: 4%;
    padding: 0.75rem 0;
    font-size: 0.7rem;
    // letter-spacing: 0.25rem;
    border-radius: 0.25rem;
  }
}
</style>
